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Introduction 

Dear students, we offer this book in computer and information technology, 
as amended and revised by a group of university professors and experts who 
specialize in this area. We hope to keep you informed of the latest developments 
in era of technology to keep pace with scientific development in problem 
solving, flowcharts and the basics of programming through the dot-net style. 
This is done in a simplified manner as the first step in the path of programming. 
This branch is very up to date; the world of computers and information 
technology relies greatly on it as we are going to see through the first and 
second semester books. 


The work team 
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Chapter One 
Problem Solving 

By the end of this chapter, student will be able to: 

Define the problem. 

; r Identify the problem solving stages. 

Write steps to solve the problem "Algorithm". 

Draw flowcharts that reflect the steps of the solution. 
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PREFACE 

In your daily life, you may face a lot of problems through various activities that contain many 
problems. 

A problem: 

Problem is a situation that requires a solution or an objective you want to achieve through 
following consecutive steps sequentially. 

1-1 Problem Solving: 

Problem Solving is the steps, activities, and processes to be done to reach an output or 
objective. 

Consider the following problem: 

The problem is: Baking a cake according to certain specifications, input available are the 
ingredients (such as eggs, flour, milk . . .etc.), then followed by activities or procedures that 
should be done sequentially to get the cake in suitable shape. 

Dear student 

In this book, we focus on Problem Solving techniques 
using the computer. 

1-2 Problem Solving Stages: 

Stages of solving problems pass through several 
steps are: 

^ First: Problem Definition: 

Problem definition implies the identification of required outputs, available inputs and, 
arithmetic and logical operations to be executed . 

Second: Algorithm Preparation: 

Algorithm is one of the methods used to solve a problem through logically arranged 
procedures. 

After identifying and analyzing the problem, outputs and inputs; a plan in the form of a 
series of successive steps is made which is called an (Algorithm), devised by the 
Mathematician and the founder of Algebra “Muhammed Ibn Musa al-Jwarizml”. 

One of the methods to represent algorithm is flowchart. 
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Flowchart: 

It is a diagram that uses standard graphical symbols to illustrate the sequence of steps 
required for solving a problem or specific question. 

Some advantages of flowcharts: 

• Facilitating the reading and understanding of the problem and illustrating to the 
programmer what must be done. 

• Useful to explain the program to others 

• helping in documenting the program in better manner, especially if the program is 
complicated 

^ Third: Program design 

Having drawn a “Flowchart” to solve the problem, using a computer; we have to 
translate this flowchart into one of the programming languages. 

^ Fourth: Program Testing 

During writing a program we unintentionally make some mistakes e.g. writing a minus 
sign (-) instead of (+). We cannot detect errors unless we begin entering data to the program 
with previously known results; and compare the results of the current program to those of the 
well-known results and so you can discover the errors and correct them. 

^ Fifth: Program Documentation 

This step includes writing all steps taken for solving the problem that include: given 
Input, output, plan for solving the problem, drawn flowchart, programming language used 
for coding , instructions, date of last modification of the program and, people who contribute 
to the program development process . This is done to have the program documented to go 
back for feedback and correction. This documentation is beneficial when more than one 
person participate in writing or modifying the program. 

Dear Student 

After we have learnt about the problem-solving 
stages and flowcharts, we will learn about some standard 
(agreed on symbols), Special symbols can also be used for 
exceptional cases. 



Here are some of the most commonly used symbols as shown in table (1-1) 
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Significance 


symbol 


(Terminal) 

C ) 

( Input/Output ) 

EJ 

(Process) 


(Decision) 

o 

(Flow Lines) 

1— t - 


Table (1-1) Common symbols for Flowcharts 

1-3 Flowchart: 

1-3-1 Simple Flowcharts: 

Exercise (1-1): 

Draw a flowchart for a program that will calculate the sum of two numbers 
entered by the user and display the result. 


First: Define the problem 

Output: The sum of two numbers 

Input: The first number is “A “and the second number is “B” 
Processing (Solution): C =A+B where the result is C 
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Second :Algorithm 


Third : Flowchart 


1 Start 

2 Enter the number A and the 
number B 

3 Performing the sum of the two 
numbers using this equation 
C=A+B, the output is C 

4 Print the output C 

5 End 



Table (1-2) Algorithm and Flowchart for summation of tow numbers 

To construct a Flowchart we should consider the following: 

1- The flowchart should start with the Start symbol and end with the End 
symbol. } 

2- A,B,C are variable names .The variable refers to a memory storage that holds a 
value. 

3- The equation: C =A+B, indicates the sum of the value of A, to the value of B, and 
stores the result in C. 

4- Entering values in A and B is done by using the term “Enter”, inside a 

parallelogram, you can also use another term to get the same meaning 

like “Read” or “Input” . 

5- The sum equation is written inside the rectangle, as it represents an 

arithmetic operation. 

6- The output is expressed with a parallelogram using the term “Output”, 

we can also use another term like “Print” or "output 1 . 

7- Note that flow line ^shows the order of an Algorithm. 
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Exercise (1-2) 

Draw a flowchart to Solve a first degree equation Y-3x+2. 

First: Define the problem 

Output: The value of “Y”. 

Input: X. 

Processing (Solution): Compute the value of “Y” from the equation Y=3x+2. 
Dear Student / remember: 

1 . The left hand side (LHS) of any equation should contain 
only one variable; the value of this variable will be the 
(output) or the solution of the equation. 

2. The right hand side (RHS) of the equation may contain 
abstracted values or arithmetic expressions that have one 
or more variables (inputs). 




Table (1-3) Algorithm and Flowchart to solve a first degree equation 

Activity (1-1) 

Write down the Algorithm, and draw a flowchart to compute the area and the 
perimeter of a rectangle whose length (L) and width (W) are known, bearing in 
mind that the equation of the area is: Area =L*W and that of the Perimeter is: 
Perimeter =2*(L+W). 
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Dear Student/ Notice 

The word “Area” refers to a Variable name, whose value is 
the calculated area of the rectangle; also “Perimeter” is a variable 
name whose value is the calculated perimeter of the rectangle. 

Variable names are chosen to WELL indicate the content of the 
variables. 

First: Define the problem 



Second :Algorithm 

Third : Flowchart 





Like the previous example, do the following activities in your notebook 

Activity (1-2) 

Write down the Algorithm, and draw a flowchart to calculate the area of a circle 
whose radius “R” is known, bearing in mind that the equation of the area of 
circle is: Area =3.14*R*R. 

Activity (1-3) 

Write down the Algorithm, and draw a flowchart to calculate the number of 
years, bearing in mind that the number of months is known. 

(ii) 



1-3-2 The use of Branching (Decision) in Flowcharts 

There are many problems that contain a question requires a Yes or No, or requires 
branching to other processes determined by flowchart. 

Exercise (1-3) 

Draw a flowchart to print the word "successful" in the case of the degree input is 
greater than or equal to 50. 

First: Define the problem 

Output: print the word “successful 
Input: the score X. 

Solution: If the value of X is greater than or equal 50; the word “successful” will 
be printed. 



Table (1-4) Algorithm and Flowchart to print the message 


Dear Student / Notice 

The execution of step (3-1) will be done only when the 
value of x is greater than or equal to 50 (the result of the 
condition is True), then it moves to step (4); otherwise when the 
value of x is less than 50 (the result of the condition is False), 
the execution is transferred to step 4 directly. 
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Exercise (1-4): 

Draw a flowchart for a program that will calculate the division of two numbers, if 
the divisor equals (zero) , the message displays “undefined 

First: Define the problem 

Output: print the result of dividing two numbers “R” or print the word 
“undefined" 

Input: Numerator is “numl”, denominator is “num2”. 

Solution: if num2=0 then print “undefined”, otherwise print the result of the 
division “R”. 


Second :Algorithm 


Third : Flowchart 


1 Start 

2 Enter the Numerator numl 

3 Enter the denominator num2 

4 If num2 =0 then 
4-1 Print “undefined” 

4-2 Go to step 7 

5 R=numl/num2 

6 Print R 

7 End 



Table (1-5) Algorithm and Flowchart to print the division of two numbers 

Dear Student / Notice 

1 . Step (4) is a decision (represented by the rhombus shape) 

It is a comparison that evaluates this question (is 
num2=0?) If the result is Yes then the word “undefined" 
will be printed according to mathematical rules; then the 
execution will be transferred to step (7) to end the 
program and prevent the execution of the division. 

2. If the result of the condition in (step 4) is false, the 
execution will be transferred to step (5) directly because 
step (4-1) and (4-2) won’t be executed. 





Exercise (1-5) 

Draw a flowchart for a program that obtains a number from the user. Determine the 
number type (even or odd) and print the result 

First: Define the problem 

Output: print the number type (even or odd). 

Input: the number “N”. 

Solution: the even number is determined if the entered number is divisible by 2 
without remainder, otherwise it will be odd. 



Table (1-6) Algorithm and Flowchart to enter a number and print its type (odd or even) 

Exercise (1-6) 

Draw a flowchart to Get a temperature degree, and print out the following results 
“greater than zero” - “less than zero “or “equal zero”. 

First: Define the problem 

Output: print out “greater than zero” - “less than zero “or “equal zero”. 
Input: temperature degree Celsius “D”. 

Solution: the temperature degree entered will be compared to zero. 
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Table (1-7) Algorithm and Flowchart to get the temperature 

Activity (1-4) 

Write down the Algorithm, and draw a flowchart to enter two unequal numbers, 
then Print “the largest is ...? “and, “the smallest number is...? “. 

First: Define the problem 

Output: print out “the largest number is ...? “the smaller number is ....?“ 
Input: X, Y so x not equal y 

Solution: 


Second :Algorithm 

Third flowchart 
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Activity (1-5) 

The following flowchart is used to calculate the Area of a circle with radius “R”. Redraw the 
Flowchart so that it displays the message “not allowed “and exits from the program (When 
the value of “R” is negative). 



Table (1-8) Flowchart to calculate the area of a circle 

1-3-3 The use of iterative Loops in Flowcharts: 

Exercise (1-7) 

Print out the numbers from 1 to 3. 

First: Define the problem 

Output: print numbers from 1 to 3 
Input: number M 

Solution: print number M and increment it by 1 then continue printing 
until the value of M become greater than 3 
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Second :Algorithm 


Third : Flowchart 



Table (1-9) Algorithm and Flowchart to print the numbers from 1 to 3 


Dear Student / Notice 

As long as the value of M does not exceed 3, the program prints value 
of M. When M becomes 4 ;( M=4) the program goes to step (4). 




The opposite figure is the same flowchart 
drawn above but in a different way, this 
means that what really matters is the 
sequence of solution steps not the flowchart 
figure. 



You can track the progress of the solution steps and follow each step of the code as shown 
in table (1-10). 
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Step 

value of M 

Result 

1 -Start 

There is No variable 


2 - \I = 1 

1 


3-If M<=3 (True) 

1 


3-1 Print M 

1 

1 

• 3-2 M=M+1 

2 


3-3 Go to step (3) 

2 


3-If M<=3 (True) 

2 


3-1 Print M 

2 

2 

■ 3-2 M=M+1 

3 


3-3 Go to step (3) 

3 


3-If M<=3 (True) 

3 


3-1 Print M 

3 

3 

3-2 M=M+1 

4 


3-3 Go to step (3) 

4 


3-If M<=3 (False) 

4 


4-End 

4 




Table (1-10) Tracking the variables and the corresponding result of exercise (1-7) 

How many times was the content of the loop executed? 

What will be the value of M after the end of the loop? 

Dear Student / Notice 

1- When the value of M equals 4, the condition becomes (False). 

2- We conclude that the number of repetition in the loop is pre 

known in this exercise. 

3- The variable M is called a counter; as it causes the steps (3-1) 
and (3-2) and (3-3) to be repeated for a definite number of times (3 times). 



Exercise (1-8) 

Modify the Flowchart of the previous exercise to print the multiplication table of Number 3 
as illustrated in table (1-11) 
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Algorithm 


Flowchart 



Table (1-11) Algorithm and Flowchart to print the multiplication table of No 3. 
Compare this flowchart to the one in the previous exercise (what are the differences?). 
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Activity (1-6) 

Track the values of the variable (J), and the printed value on executing every step in the 
previous exercise (write down in your notebook). 

What is the value of J after the end of the loop. 

Make the necessary modifications to the Flowchart of the previous exercise, so that 
you can enter the required multiplication table constantly instead of printing the 
multiplication table of “3”. 


Algorithm 

Flowchart 

1 Start 


2 Enter N 


3 J=1 


4 If J<=12 then 


4-1 Print J*N 


4-2 J=J+1 


4-3 Go To step(4) 


5 End 



Table (1-12) Algorithm to print the multiplication table of an entered number 

Activity (1-7) 

Write down the Algorithm, and draw a flowchart to print out even numbers from 1 to 10. 
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Exercise (1-9) 

Print out the sum of integer numbers from 1 to 3. 



Table (1-13) Algorithm and flowchart to print the sum of integer numbers from 1 to 3 
You can track the values of variables as shown in table (1-14) 


Step 

Value of N 

Value of Sum 

Result 

1 -Start 

No variable 

No variable 


2-N=l 

1 

No variable 


3-Sum=0 

1 

0 


4-Sum=Sum+N 

1 

1 


5-N=N+l 

2 

1 


6-if N>3 (False) 

2 

1 


7-1 Go To step (4) 

2 

1 


4-Sum=Sum+N 

2 

3 


5-N=N+l 

3 

3 


6-if N>3 (False) 

3 

3 


7-1 Go To step (4) 

3 

3 


4-Sum=Sum+N 

3 

6 


5-N=N+l 

4 

6 


6-if N>3 (True) 

4 

6 


6-1 Print Sum 

4 

6 

6 


Table (1-14) tracking the values of variables and corresponding results of exercise (1-9) 
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Dear Student / Notice 

Variable N is considered a Counter, while variable Sum is used for 
accumulation process. 

Activity (1-8) 

Redraw the Flowchart of the previous exercise in your notebook after modifying it to print 
out the sum of odd numbers from 1 to 10. 



Activity (1-9) 

After executing the previous activity, draw the flowchart in your notebook to print out the 
sum of even numbers instead of the odd ones. 
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Questions 


First: Put (S) in front of the correct sentence and (X) in front of the wrong one: 


( 1 ) 

Flowcharts use standard symbols and lines to represent a problem algorithm. 

( 

) 

( 2 ) 

You can use any Geometric shape to represent Algorithm when drawing 
flowcharts. 

( 

) 

( 3 ) 

The symbol ^ ^ is used to represent start and end of flowchart. 

( 

jl 

( 4 ) 

The rectangle symbol 


is used to represent the data input operation. 

( 

71 

( 5 ) 

The symbol is used to represent a decision process in flowcharts. 

( 

71 

( 6 ) 

The problem means that an objective or output is required to reach. 

( 

71 

( 7 ) 

Preparing a cup of tea is an example of a problem. 

( 

) 

( 8 ) 

Problem solving is the steps, activities, and processes to be done to reach an 
output or objective. 

( 

) 

( 9 ) 

The program documentation is a set of procedures arranged logically for solving a 
specific problem. 

( 

) 

( 10 ) 

The program testing is writing down all the steps taken to solve a problem. 

( 

jl 

( 11 ) 

Documenting the program means making sure that the program is free of errors. 

pL 

71 

( 12 ) 

Algorithm is a set of procedures arranged logically for solving a specific problem. 

( 

) 

( 13 ) 

The program documentation is writing down all the steps taken to solve a 
problem. 

( 

) 

( 14 ) 

Testing the program means making sure that the program is free of errors. 

( 

) 

( 15 ) 

Flowcharts are diagram representations which depend on drawing some standard 
symbols to clarify the order of procedures to solve a problem. 

( 

) 

( 16 ) 

Flowcharts help to facilitate understanding of the problem, analyse and convert it 

( 

) 

to a program. 




Second: Choose the appropriate answer to complete each phrase of the following: 

1- Steps, activities and procedures to be done to reach an objective or an output - can be 
called: 

a. problem definition b. problem c. problem solving 

2- On drawing flowcharts we use: 

a. standard symbols and lines b. all geometric figures c. one geometric figure 

3- A set of procedures arranged logically for solving a specific problem - can be called: 

a. problem b. algorithm c. program testing 

4- Making sure that the program is free of errors - can be called: 

a. program testing b. program documentation c. algorithm 

5- Writing down all the steps taken to solve a problem errors - can be called: 

a. program documentation b. program testing c. flowcharts 
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6- Problem-solving includes many terminologies, the terminology that expresses the 
preparation of a cup juice is: 

a. Flowchart b. algorithm c. problem 

7- Problem-solving approach includes many of the terminologies, the terminology that 
expresses the mathematical problem is: 

a. Algorithm b. problem c. program design 

8- A diagramatic representation that depends on drawing some standard symbols to 
clarify the order of procedures to solve a problem can be called: 

a. Problem b. algorithm c. flowchart 

9- In the following flowchart: 



The number of iterations (print the value of M) is: 

a- 2 b- 3 c- 4 


10- In Flowchart of the previous question, the value of M after the end of the iterative 
loop equals: 

a. 2 b-3 c-4 
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Chapter: 2 

Introduction to Visual Basic.net 

By the end of this chapter, the student will be able to: 

Explain what is meant by programming language 
Identify the essence of Visual Basic.net 
Identify the main components of IDE screen 
Identify what Framework. Net can provide 
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INTRODUCTION 

In the previous chapter, you have studied the logical steps of solving a problem. In this 
chapter, you will deal with Visual Basic.net program which will enable you to convert the 
steps of solving a problem into programme codes that can be carried out. 

2-1 The language of Visual Basie.net 

It is one of the high level programming languages and designed to be easy to learn as 
its commands and instructions use English language vocabulary and it can be used in many 
applications such as: 

1- Windows applications 

2- Web applications 

2-2 Programming and Computer memory 

Commands and instructions which are written in Visual Basic.net enable you to create 
objects in computer memory and every object has: 

1- Properties such as (size-colour- font) of the text written on the program interface. 

2- Events such as click on a command button. 

3- Procedures, each one contains commands and instructions which are carried out when 
calling this procedure. 

So, the Visual Basic.net is considered: 

Object oriented as its programmes work through objects in computer Memory. 

Event Driven as commands and instructions are carried out as soon as certain event 
occurs. 

2-3 'The language of Visual Basic.net and Framework.net: 

The Framework.Net provides the following: 

* Libraries through which we create the objects, 

* Runtime environment (called Runtime) in computer memory where Applications 
produced by the language of Visual Basic.net language work in. 

* Compilers which compile commands and instructions written in Programming 
language into machine code which the Computer deals with. 
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2-4 Visual Basic.net and IDEs 

The programmer of Visual Basic.net needs Integrated Development Environment ( IDE ) 
which provides tools and merits to the programmer that help him create applications ( 
windows - mobile - web ). Visual Studio represents IDE as shown in figure (2-1): 


TamerMansour - Microsoft Visual Basic 2008 Express Edition 


File Edit View Project Build Debug Data Tools Window Help 

; S3 a - J J illi ' - - ► JJ J *1 la -j i a x $ m ; 



Figure (2-1) IDE window 



When the programmer creates a new project, it appears as in figure ( 2-2 ) 


Figure (2-2) (IDE) screen for new project 
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Numbers shown in figure (2-2) refer to some components of Integrated Development 
Environment IDE 

1- Form Window 

2- Toolbox Window 

3- Properties Window 

4- Solution Explorer 

2-4-1 Form 

The form is the interface which the user deals with through different controls such as Button, 
Textbox, label etc. as shown in figure (2-3) 


Form window after putting controls 


Form window before putting controls 




Figure (2-3) form window before and after putting controls 

2-4-2 Toolbox 

It contains tools of controls which can be put on the Form and can be shown in 
categories as in Figure (2-4) 

Notice that there is (+) sign beside every category and when you click it, a group of tools 
controls appear and you can show all tools of controls by choosing the category (All 
Windows Forms) 


Some of these categories include: 
*Common Controls 
*Menus & Toolbars 




© All Windows Forms 


© Common Controls 


E Containers 
S Menus Si Toolbars 
S Data 

S Components 
© Printing 
© Dialogs 

B WPF Interopera bi I ity 
E Visual Basic PowerPacks 
H General 


There are no usable controls in this group. Drag an 
item onto this text to add it to the toolbox. 


Figure (2-4) ( Toolbox) 
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There is a group of control Tools under each category as shown in figure (2-5) 


Toolbox B 

[+ All Windows Forms 
(+ Common Controls 
Containers 

CMenm & Toolbar^ ^ 

Pointer 

§0 Context Menu Strip 
iHj MenuStrip 
1st Status St rip 
Gas T ool Strip 
O Tool Strip Container 
1+ Data 

Components 
E Printing 
H Dialogs 

(± WPF Interoperability 
Id Visual Basic PowerPacks 
E General 

There are no usable controls in this group. Drag an 
item onto this text to add it to the toolbox, 


Figure (2-5) controls under various categories 
Some Common Controls 


Button 

TextBox 

Label 

ListBox 

ComboBox 

CheckBox 

RadioButton 



Table (1-1) Some common Controls 



2-4-3 Properties Windows 

Each tool of the above Common Controls has a group of properties which can 
adjusted through "Properties Window" as shown in Figure (2-6) 



Figure (2-6) Properties Window 
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DEAR STUDENT / NOTICE 

The shown Properties in Properties Window are different according to the active part on 
the IDE screen. 

2-4-4 Solution Explorer 

There is a list of folders and files of the projects in this part as shown in Figure (2-7) 



Figure (2-7) Solution Explorer window 


Activity (2-1): 

With the help of your teacher create a project with the name " MyFirstProject " and the 
solution name is " MyFirstSolution " and then add another project to the solution with the 
name " MySecondProject " 
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Questions 


First: Put (S) in front of the correct sentence and (X) in front of the wrong one: 


N 

Question 

Answer 

1- 

The VB.net language is one of the high level languages. 

( ) 

2- 

The VB.net language is one of Event Driven languages. 

( ) 

3- 

The VB.net language is the only high level language. 

( ) 

4- 

The VB.net language is considered a high level language because it is easy to 
learn. 

( ) 

5- 

The VB.net language is used in producing Windows applications and Web 
applications. 

( ) 

6- 

The VB.net language is used in producing Web applications only. 

( ) 

7- 

The VB.net language can't be used in producing Windows applications 

( ) 

8- 

Every Object is characterized by certain properties and certain behaviour 
when a certain event occurs on it. 

( ) 

9- 

Events and procedures which belong to any object in VB.net language are 
called properties. 

( ) 

10- 

The name, the size and colour of an object are all samples of events that can 
occur to the object in VB.net language. 

( ) 

11- 

The name, the size and colour of an object are all samples of properties of 
some objects in VB.net language. 

( ) 

12- 

The Events are the commands and instructions which are carried out when a 
certain procedure occurs to the object in VB.net language. 

( ) 

13- 

The procedures are the commands and instructions which are carried out 
when a certain procedure occurs to the object in VB.net language. 

( ) 

14- 

Pressing click and D-click are samples of some events that can occur to an 
object in VB.net language. 

( ) 

15- 

Framework.net contains Compilers, libraries and runtime environment 

( ) 

16- 

Compilers in Framework. Net are considered the environment of runtime for 
applications which are produced in VB.net language. 

( ) 

17- 

Compilers are programmes that translate commands and instructions written 
by the programmer from the high level language into machine language. 

( ) 

18- 

Object Oriented Programming Languages are the languages that work 
through objects in memory. 

( ) 

19- 

All programming languages which carry out a group of commands and 
instructions are considered as Event Driven languages. 

( ) 

20- 

Visual Studio is considered IDE because it includes a group of tools, elements 
and characteristics necessary to produce applications. 

( ) 


Second: Choose the correct answer to complete each statement: 
1-Object Oriented programming language depends on: 

a- using Windows applications, 
b- Using Web applications 
c- Objects in computer memory. 
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2- You can produce Windows applications or Web applications by using: 

a- Objects in computer memory 
b- VB.net language 
c- Properties and Events 

3- Characteristics which describe the object such as size, name and colour are called: 

a- Properties 
b- procedures 
c- Events 

4- Click on Button is: 

a- property 
b- procedure 
c- Event 

5- Commands and instructions which we want to carry out are called: 

A -properties 
B -producers 
c - Events 

6- The Properties term refers to: 

a- Features that describe the object. 

c- Events that can occur to the object. 

c- Commands and instructions that are carried out. 

7- The Events term refers to: 

a- properties that describe the object, 
b- Events that can occur to the object, 
c- Commands and instructions that are carried out. 

8- The Procedures term refers to: 

a- properties that describe the object, 
b- Events that can occur to the object, 
c- Commands and instructions that are carried out. 

9- libraries, Compilers and Environment of runtime of applications are the most 
important components of: 

a- Object Oriented, 
b- Event Driven, 
c- Framework.net. 

10- IDE is called: 

a- Visual Basic.net 
b- Visual Studio, 
c- Framwork.net. 


( 32 ) 


Chapter Three 
Controls 


By the end of this chapter, student will be able to: 

Recognize the Properties Window. 

Choose the appropriate Property. 

Choose the proper value for the Property. 
Differentiate between controls Properties. 
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3-1 Form 

The Form has many properties which share in defining the form of program screen we want 
to create. Here are some properties of the Form: 


N 

Property name 

Function 

1 

Name 

Name of Form used in Code Window. 

2 

Text 

The appeared Text on the title bar of the Window. 

3 

Backcolor 

The background color of the Form. 

4 

Right to Left 

The direction of Controls on the form Window From Right to Left. 

5 

Right to Left layout 

The layout of Controls on the Form from right to left. 

6 

MinimizeBox 

It controls the appearance or disappearance of MinimizeBox of Form 
Window. 

7 

MaximizeBox 

It controls the appearance or disappearance of MaximizeBox of Form 
Window. 

8 

ControlBox 

It controls the appearance or disappearance of ControlBox of Form 
Window. 

9 

FormBorderStyle 

The Border style of Form Window. 

10 

WindowState 

It defines the Window State of the Form (Maximizing, Minimizing or 
normal). 


Activity (3-1) 

Set the following properties of the Form on your computer: 

Here are the effects of setting the previous properties on the Form: 


property 

Value 

Appearance mode 
of property effect 

Form Window after setting 
the property 

Name 

frmSquare 

In design mode 

The value of Name property 
doesn't appear on the Form 
because it is used as Form 

name in code window. 
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Text 


In design mode and 
runtime mode 

“9 | 1=1 || B || £3 | 

| : 


BackColor 

DarkSeaGr 

een 

In design mode and 
runtime mode 

“9 CD © £3 


Rig htTo Left 

Yes 

In design mode and 
runtime mode 

■9 5.^s4>Ud cd 0 S3 


RightToLeftLayout 

True 

In design mode and 
runtime mode 

| S3 || 0 e=> “9 

i n 
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The following is the effect of setting the value of the previous properties of the form : 


property 

value 

Appearance mode of 
property effect 

Form Window after 
setting the property 

MaximizeBox 

MinimizeBox 

False 

False 

In design mode and 
runtime mode 



S iJ* 8 

i 

ControlBox 

False 

In design mode and 
runtime mode 

■ 

FormBorderStyle 

None 

In design mode and 
runtime mode 

Note the 

disappearance 

of title bar and 

form borders 

WindowState 

Maximized 

In runtime mode 

The form is Full screen 
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Notes: 

• There are common properties among different Controls such as (Name-Text - Forecolor 

- Backcolor - Right To Left etc.) 

• There are some properties which their effect doesn't appear on Controls until you set 
some other properties , for example the Right to Left Layout property doesn't work 
unless the value Right to Left equals Yes. 

• There are properties of the form, if they are set, they are applied to Controls which are 
placed on this Form such as font and ForeColor properties. 

• The default value of the property (Text) and the property (Name) is the same and it is 
(Forml). 

• When you set some properties, the effect of setting appears directly on the Form in design 
mode of the programme. 

• There are some properties which their effect doesn't appear on the Form or Controls until 
you run the programme. 

• The other Controls may have the same properties mentioned above, so they won't be 
repeated again When we studying these other controls once more. 

• We will study the distinctive properties of each tool as follow: 

3-2 Button 

It is one of Controls which can be placed on the Form. When you click it, it does a certain 

task. 

3-2-1 placing the Button on the form. 

By double clicking on the Button control on Toolbox, the Button appears on the Form in 

Design mode as it is shown in Figures (3-1) and (3-2) 



Toolbox 

t a X 

■ > All Wkidcnm forma, 

( uminuna CfMlIfOK 


b- Pprnjer 


Q *- 1 


y, CheckBox"'""— 

SLC C hmkedLiil&DV 
Combo&DK 
l p? E>n(eTimePicker 

Double Click here 


A Ljbei 

A Ll<nkLsb«l 

Lktiox 


Figure (3-1) Button in Toolbox Figure (3-2) the shape of Button after drawing it 
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Some distinctive properties of Command Button: 


N 

Property 

Function 

1 

Location 

The location of placing Button on the Form. 

2 

Size 

Defining the height and width of Button on the Form. 

3 

Text 

The appeared Text on the Button 

4 

BackColor 

Choosing the backColor of the Button. 

5 

Font 

Defining (shape, size and style) of the Text font appeared on 
the Button. 

6 

ForeColor 

Choosing the ForeColor to the appeared Text on the Button 


Note that when you click on the command button in the design mode: 



Activity (3-2) 

Set the following properties on your computer: 

Here are the effects of setting the previous properties on the Button: 


property 


Value 


Appeared effect of 
property 


Form Window after setting the 
property 


location 


0,0 


In design mode and 
runtime mode 
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location 


98,108 


In design mode and 
runtime mode 



Size 



In design mode and 
runtime mode 


Size 


121,62 


In design mode and 
runtime mode 


b j. - < 



o 


-o 
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3-3 Label 

It is a tool used in showing a Text on the Form Window which can't be changed during 
programme Runtime. 

Some distinctive properties of the Label: 


N 

Property 

Function 

1 

AutoSize 

The Size of the Label is defined automatically according to the 
written Text if the Value of property equals true. 

2 

BorderStyle 

Choosing the Border Style of the Label 


Here are the effects of setting the previous properties on the Label tool: 


property 

Its Value 

Name 

lblResult 

Text 


Forecolor 

Choosing an 

appropriate 

color 

Backcolor 

Choosing an 

appropriate 

color 

Font 

Choosing the 

Size, Style and 
Type of the 
appropriate Font 

AutoSize 

False 

BorderStyl 

e 

FixedSingle 


The effect of 
property 
appears 


The Form window after setting the 
property 


In design mode 


In design mode 
and runtime mode 
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Notice: You can change the size of Label manually by using the process of drag and drop 
when the Value of the property AutoSize is false through the eight handles in design mode 
only and its effect appears in design mode and runtime mode. 


3-4 Text Box 

It is a tool used to insert (input) data from the user during programme run time. 
Some distinctive properties of the Textbox: 


N 

property 

Function 

1 

Maxlength 

It defines the maximum number of letters which can be 
inserted in the TextBox 

2 

PasswordChar 

It defines a symbol used instead of written text in case we 
have a password. 

3 

Multiline 

allows multiple lines within the text box control tool. 


Here are the effects of setting some properties on TextBox : 


Property 

value 

The effect 

of 

property 

appears 

Maxlength 

30 

In runtime 

mode. 

Password 

Char 

* 

In design 
mode and 

runtime 

mode after 

set a value 

to the text 
property 

Multiline 

True 


Window Form after setting the property 


w _y. : 


54^ Jj»J £ 




Letters less then 30 


Letters replaced by 


Writing in 
multiline 



ijjl y j JLI? 

FaceBook 




jLjuLI|" ■ ■ -h - . . J 


*“ 4 




( 41 ) 






3-5 ListBox: 

Shows a list of items 

Some distinctive properties of ListBox: 


N 

Property 

Function 

1- 

Items 

A group of items shown in the ListBox 

2- 

Sorted 

It defines whether the elements in the list are sorted or not. 

3- 

selectionMode 

It defines whether it is possible to choose one item or more 
shown in the ListBox. 


Here is the effect of setting some properties on the ListBox : 



3-6 ComboBox 


A ComboBox control displays a drop-down list from which one item can be selected. 
Some distinctive properties of the ListBox: 


N 

Property 

Function 

1- 

Items 

A group of items which are shown in comboBox. 

2- 

AutoCompleteSource 

It is a source of suggested items to select from. 

3- 

AutoCompleteMode 

It defines the method of list completing process. 


( 42 ) 




Here is the effect of setting some properties on the ListBox : 


Property 


value 


Effect of 
property 
appears 


FormWindow after setting the property 


Items 


AutoCompleteMode 


AutoCompleteSource 


CEJAS' 

Lml 

ujjud) 

LjtLjj-j 

(Each 
country 
name in 
single 
line) 


Suggest 


Listltems 


In runtime 
mode 


“ ! => i 


.bkall 




Jjl\. 


Note when writing 
"Jtt" the countries 
starting with " Jt" are 
suggested 


3-7 GroupBox : 

Is used to group other controls of same function together on the Form window 
Here is the effect of setting some properties on the GroupBox: 


Property 

value 

Effect of 

property 

appears 

FormWindow after setting the property 

Text 


In design 
mode and 

runtime 

mode 



Forecolor 

Choose the 

Red color 

RightToLeft 

yes 
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3-8 (RadioButton): 

The programme user selects one alternative only. 
Some distinctive properties of the ListBox : 


N 

property 

Function 

1 - 

Checked 

It shows whether RadioButton has been chosen or not. 

2- 

Text 

It is the Text shown on RadioButton 


In case of placing a group of RadioButtons and set the text property to each one of them in 
design mode as it is shown in the following Figure (3-3) 



Figure (3-3) A set of RadioButton 

During programme runtime , you can select one RadioButton only as it is shown in Figure (3-4) 



Figure (3-4) Choosing one RadioButton 

You can use GroupBoxes such that each group has a title and the user is allowed to choose 
one alternative from each group as it is shown in Figure (3-5) 
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Figure (3-5) Choosing one RadioButton of each group 

One RadioButton is placed inside the GroupBox by dragging the appropriate 
radioButton inside the GroupBox. 

3-9 Checkbox 


It is used for placing some alternatives to enable the user to select 
One CheckBox or more as shown in Figure (3-6) 

During programme runtime, you can select more than one Checkbox. 


As shown in Figure (3-6) 



Figure (3-6) Choosing more than one CheckBox 
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Questions: 


First : Put ( V )in front of the correct statement and(x) in front of the wrong one 


N 

Question 

Answer 

1 

The function of the property RightToLeft of the Form is to define the direction of 
Controls from right to left. 

( 

) 

2 

The function of the property RightToLeft of the Form is to define the state of the Form 
on the screen in a position of Maximizing or Minimizing. 

( 

) 

3 

Setting the property ControlBox of the Form can control the Form in a position of 
Maximizing during programme.runtime. 

( 

) 

4 

The property "Name" is used in showing a certain Text in the title bar of user window a 
name of the window. 

( 

) 

5 

The property Text is used in showing a certain text the title bar of of user window. 

( 

) 

6 

Setting some properties of the Form is applied to Controls which are placed on the 

Form. 

( 

) 

7 

The effect of setting the WindowState property of the form appears only in runtime 
mode 

( 

) 

8 

You can change the location of Command Button on the Form through Size property. 

( 

) 

9 

You can change the location of Command Button on the Form through Location 
property. 

( 

) 

10 

Placing Controls automatically on the Form on the co-ordinate (0-0) is in the middle of 
the Form. 

( 

) 

11 

You can change the size of Label manually if AutoSize=true 

( 

) 

12 

You can change the size of Label manually if AutoSize=false 

( 

) 

13 

"Textbox control tool: is the only tool which has the property passwordChart 

( 

) 

14 

"Textbox control tool: is the only tool which has the property AutoSize 

( 

) 

15 

ListBox and ComboBox share in "Items" property. 

( 

) 

16 

ListBox and and ComboBox share in " Suggest " property 

( 

) 

17 

GroupBox is the tool used in containg a group of controls, these controls have the 
same function on the Form. 

( 

) 

18 

ListBox is the tool used in containg a group of controls, these controls have the same 
function on the Form. 

( 

) 

19 

CheckBox can be used on the Form to choose the Gender of student male or female. 

( 

) 

20 

Combobox is the control tool that allows the user to choose one element of several 
elements in the smallest possible space on the form window 

( 

) 


Second: Choose the correct answer to complete each statement: - 

1- The function of "Right to Left" property of the Form is: 

a- define the direction of Control tools from Right to Left. 

b- Define whether the layout of ControlTools on the Form is from Right to Left. 

c-define the state of the window in a state of maximaizing or minimaizing. 

2- ControlBox property of the Form is helping to: 

a- showing or hiding of Maximaizing Box. 

b- Control the appearance of the Form whether it is in a position of Minimaizing / Maximaizing / 
Normal. 

C-Control the appearance or disappearance of ControlBox in the Form. 
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3- The used property in showing a certain Text on the titlebar of a Form is : 

a- Name b-Text c-FormB orderS tyle 

4- On setting some properties of the Form, they are applied on Control Tools 

Which are placed on the Form (one of them is): 

a-Name b-Forecolor c-Text 

5- The effect of setting this property doesn't appear unless in runtime mode (This property is): 

a-FormBorderStyle b-WindowState c-RightToLeft 

6- The property which is responsible for the size, shape and effect of the Text font shown on 
the Button is : 

a-Backcolor b-Forecolor c-Font 

7- You can change the position of the Button on the Form through the following processes 
except for: 

A-drag and drop by the mouse b-setting Size property c-setting Location property 

8- You can change the position of the Button on the Form through: 

a. setting Location property b-setting Size property c-the eight squares around the 

Button 

9- On inserting any ControlTool by pressing D-Click from the ToolBox on the Form , the 
appropriate place to be shown is : 

A-coordinate (0, 0) 
b-the middle of the Form 

c-the position of ControlTool is different according to the size of the Form 

10- The size of Label is defined automatically on the Form if the property is: 

a-AutoSize = False b- BorderStyle= FixedSingle c- AutoSize=True. 

11- You can change the size of control "Label" manually if the property is : 

a- AutoSize = False- b- BorderStyle= FixedSingle c- AutoSize=True- 

12- The following properties belong to TextBox except for: 

a-AutoSize b-MultiLine c-MaxLength 

13- The Object TextBox is marked by one property: 

a-AutoSize b-Name c-PasswordChart 

14- The right value which can be used to set the PasswordChart of the TextBox is: 

a-Pw b-True c-* 

15- The ListBox and ComboBox share in this property: 

a-Suggest b-Item c-SelectionMode 

16- The ControlTool which is used in containing a group of controls that have the same 
function on the Form is: 

a-ComboBox b-ListBox c-GroupBox 
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17- The Control tool which can be used on the Form to choose Gender of the student 
"male"or "female" is: 

a-RadioButton b-CheckBox c-TextBox 

18- The ControlTool which can be used on the Form and allows the user to choose more than 
one alternatives is : 

a-RadioButton b-GroupBox c-CheckBox 


19-The ControlTool which allows the user to choose one item of 15 
in the smallest possible area on the Form is: 

a-ComboBox b-ListBox c-RadioBox 
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Chapter Four 

Code Window 

By the end of this chapter, students will be able to: 

♦ Work with the Code window. 

♦ Define the Event Handler. 

♦ Adjust Controls' Properties programmatically. 


( 49 ) 


4-1 Code Window 

Visual Basic.NET language provides a window through which we can write instructions and 
codes of the program called (code window) 

To open the (Code Window) of (Forml) perform the following: 

1. Make sure that the window Form is active 

2. From the keyboard press (F7) 

The Code window is displayed as shown in figure (4-1) 



Figure (4-1) (Code Window) 


The numbers shown in figure (4-1) indicate: 

(1) Name of the file where codes are saved. 

(2) Name of the file where the Form window interface is saved. 

(3) The declaration of Class; its name is (Forml). 

(4) Space between two lines; to type codes for the Class (Forml). 

(5) The end of the class (form 1). 

4-2 Event Handler 

It’s a procedure which contains a code that is carried out when a corresponding event 
occurs.. 


To create event handler do the following steps: 

1. In the (Solution Explorer) window, right click the file (Forml. vb) and, select (View 
Code) from the context menu as shown in figure (4-2). 


Solution Explorer 


B|fr alma 

i := al My Project 


Project name 


tJ 

Open 

m 

^View C 

m 

View Designer 

& 

Cut 

m 

Copy 

X 

Delete 


Rename 

;==i 

Properties 


From the context menu 
choose (View Code) 


Figure (4-2) to display the Code Window 




When choosing (View Code) the following figure (4-3) appears 


/ Forml.vb [Design]* | Form2.vbf' Form2.vb [Design )^ Forml.vb* [ start Page ] 


■%fnn5quare 


▼ ;; J(Dec la rations] 

T 

□ 

L 

1 

z/tls.33 frmSquare 

lass 

2 


A 


Figure (4-3) the Code Window 

The numbers shown in figure (4-3) indicate: 

(1) A drop-down menu of (Class Names) that displays the names of controls on the form. 

(2) A drop-down menu of (Method Names) or events; associated with the item selected 
from the (Class Names) menu. 


5J Geometric - Microsoft Visual Basic 2008 Express Edition 



figure (4-4)display control names in the Code Window 


2- Open (Class Name) menu and note that the default names of the controls are listed as shown 
in figure (4-4). 

Suppose that the window of the form used is as shown in Figure (4-5) 




— 1 i 

S3 II E II = 1 

B - 1 



fcUail Jjk 



C 





rTTTTTTTT: 



Figure (4-5) The model window in the new project 
without setting (Name property) of controls included on the Form. 
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3- When you select (Button 1) from the Class menu drop down list, open (Method name) 
menu it displays the events associated with (Buttonl) as shown in figure (4-6). 


frmSquare.vb frmSquare.vb [Design] Start Page 
O* Buttonl 


El Public Cla 33 frmSquare 

1 -End Class 




(Declarations) 

M (Declarations) 

9 AutoSizeChanged 
/ BackColorChanged 
/ BackgroundlmageChanged 
/ BackgroundlmageLayoutChanged 
/ BindingContoctChanged 
/ CausesValidationChanged 
•f ChangeUICues 


/ ClientSizeChanged 
/ ContextMenuChanged 
-f ContextMenuStripChanged 
/ ControlAdded 
/ Control Removed 
CursorChanged 
/ Disposed 
/ DockChanged 
/ Doubleclick 
$ DragDrop 


Figure (4-6) choose the required event from the drop-down menu 
(Event handler) as shown in figure (4-7): 



The numbers shown in figure (4-7) indicate: 

(1) The procedure name composed of (object name, event name). 

(2) End of procedure line. 

(3) What causes the call of the procedure (event occurrence) . 

(4) Between the two lines shown; the code that will be executed on calling the 
procedure is written after the occurrence of the (Event 

(5) The declaration of the class line (frmSquare) 

(6) The end of (class) line. 

5-Adjust the property (Name) for the following controls as shown in table (4-1). 


No 

control 

Value of the property(Name) 

1 

Buttonl 

btnCalculate 

2 

Label 1 

IbILength 

3 

Label2 

IbIResult 

4 

TextBoxl 

txtLength 


Table (4-1) 


After setting the properties, select (Code) from (view) menu. 
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Open the (Class) menu and note that the displayed names of the controls have been changed as 
shown in figure (4-8). 


'Geometric - Microsoft Visual Basic 2008 Express Edition 



Figure (4-8) the displayed new Names of the (Controls) 


4-3 Setting the (Properties) programmatically 

In chapter 3, we have already set the properties through properties window. You can adjust 
the properties using the following syntax: 


CONTROLNAME . PROPERTY = VALUE 



Example: 

Write the following code in the appropriate event handler (Buttonl_Click) for buttonl 

( " \ 

Private Sub Buttonl_Click(sender As Object, e As EventArgs) Handles Buttonl. Click 

Labell.Text = " 

End Sub 

V / 
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Buttonl 


When the event occurs, formwindow appears, as shown in a figure (4-9): 

Figure (4-9) the form window after the occurrence of click event 
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Questions 


l) Complete the table with a number from 1 to 5 using the next screen to express 
every number to what it refers to: 



Number 

Indicate 

( ) 

The end of class 

( ) 

The place to write the codes of the class 

( ) 

The name of the file that saves the design of the form interface 

( ) 

The name of the file that saves the code 

( ) 

The start of the class 


2) Complete the table using the next screen: 
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No 

Indicates 

1 



2 



3 



4 



5 




3) complete the table using the next screen : 



Question 

indicates 

1 

The name of the solution is 

2 

The name of the project is 

3 

We can enter the code window more than one way, through : 

• Command in the shortcut menu 

• function key 

4 

The purpose of properties in the shortcut menu is 



4) Complete the table using the following screen : 
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Answer the questions using the following screen: 


N 

indicates 

1 



2 



3 





1- The number of forms is 

2- number (1) refers to 

3- number (2) refers to 

4- List three different control tools from the previous screen 


5- The name of the class is 

5) Answer the question using the following screen : 


frinSquare,vb frmSquare.vb [Design] Start Page 


<>^Buttonl ^ 

ill [Declarations] 

□ Public Class frmSquare 

£31 [Declarations] 

1-End Class 

¥ AutoSizeChanged 
¥ BackColorChanged 


¥ BackgroundlmageChanged 
¥ BackgroundlmageLayoutChanged 
¥ BindingContextChanged 
¥ CausesValidationChanged 
¥ ChangeUICues 
■ 

¥ ClientSizeChanged 
¥ ContedMenuChanged 
¥ ContextMenuStripChanged 
¥ Control Added 


¥ Control Removed 
¥ CursorChanged 
¥ Disposed 
¥ DockChanged 
¥ Doubleclick 


¥ DragDrop 

:T „ ^ . 
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a- From the previous screen write 3 different events : 


b- frmSquare refers to 

c- The events in the window belong to the control 
d- The name of the active tab in the window is 



NO. 

indicates 

1 


2 



3 



4 



5 



6 
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7) Explain the components of the general syntax to adjust the properties of 

controls programmatically : 


ControlName. Property = Value 


t 



// 

\ 








8) Explain the following codes through your pervious study for the general syntax 

to adjust the properties of control programmatically : 

(A) Button2.Text = "END" 


(B) Labell. AutoSize = True 
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